<template>
  <div id="detail">
    <!--     头部-->
<!--    <header>
      <h3>万事达-TMS客户端</h3>
      <div>发票管理-详情</div>
    </header>-->
    <TmsHeader :tmsheader="tmsheader"></TmsHeader>
    <div class="jiBen">
      <div class="dingDan">订单号* XL189666654566</div>
      <div class="heTong">合同编号： HTDKL8699896378</div>
      <div class="yunShu">运输单号:  SL8699896378</div>
    </div>
<!--    货物信息表-->
    <h3>货物信息</h3>
    <el-table
        :data="tableData"
        border
        :span-method="arraySpanMethod"
        style="width: 60%">
      <el-table-column
          prop="name"
          label="货名">
      </el-table-column>
      <el-table-column
          prop="amount1"
          sortable
          label="规格型号">
      </el-table-column>
      <el-table-column
          prop="amount2"
          sortable
          label="总包装">
      </el-table-column>
      <el-table-column
          prop=""
          sortable
          label="总数量">
      </el-table-column>
      <el-table-column
          prop=""
          sortable
          label="总重量kg">
      </el-table-column>
      <el-table-column
          prop=""
          sortable
          label="总体积m³">
      </el-table-column>
    </el-table>
<!--    运费统计-->
    <h3>运费统计</h3>
    <el-table
        :data="tableData"
        border
        style="width: 60%">
      <el-table-column
          prop="date"
          label="单价"
          width="180">
      </el-table-column>
      <el-table-column
          prop="name"
          label="总里程(km)"
          width="180">
      </el-table-column>
      <el-table-column
          prop="address"
          label="运输费(￥)">
      </el-table-column>
      <el-table-column
          prop=""
          sortable
          label="其他费用(￥)">
      </el-table-column>
      <el-table-column
          prop=""
          sortable
          label="费用总计(￥)">
      </el-table-column>
    </el-table>

<!--    发票信息-->
    <h3>发票信息</h3>
    <el-table
        :data="tableData"
        border
         id="faPiao">
      <el-table-column
          prop="date"
          label="发票号："
          width="180">
      </el-table-column>
      <el-table-column
          prop="name"
          label="发票金额(￥)："
          width="180">
      </el-table-column>
      <el-table-column
          prop="name"
          label="发票备注："
          width="180">
      </el-table-column>
    </el-table>
<!--   发票电子附件-->

    <div class="images">
      <h4>发票电子附件</h4>
      <img src="" alt="">
      <img src="" alt="">
    </div>
<!--    返回按钮-->
    <div id="fanHuiD">
      <el-button type="info" id="fanHui" @click="fanHui">返回</el-button>
    </div>

  </div>
</template>

<script>
import TmsHeader from '../../TmsHeader'

export default {
name: "Detail",
  components: {TmsHeader},
  data() {
    return {
      tmsheader:{
        tmsBigTitle: "客户端",
        tmsATitle: "发票管理",
        tmsBTitle: "详情",
      },
      tableData: [{
        id: '12987122',
        name: '合计',
        amount1: '234',
        amount2: '3.2',
        amount3: 10
      }]
    }
  },
  methods: {
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if (rowIndex % 2 === 0) {
        if (columnIndex === 0) {
          return [1, 3];
        } else if (columnIndex === 1) {
          return [0, 0];
        }
      }
    },
    fanHui(){
      this.$router.push('./contractManagement')
    }


  }
};

</script>

<style scoped>
/*#detail{
  text-align: left;
}*/
h3,h4{
  text-align: left;
}
header{
  text-align: left;
  /*border:1px solid;*/
}
.jiBen{
  display: flex;
  /*border: 1px solid;*/
  background: #CCCCCA;
}
.jiBen>div{
  margin-right:30px;
  height: 40px;
  line-height: 40px;
}
.images{
  margin-top:20px;
  display: flex;
}
img{
  margin:0 20px;
  border:1px solid;
  width: 90px;
  height: 160px;
}
#fanHuiD{

}
#fanHui{
  width: 80px;
  height: 40px;
}
#faPiao{
  width: 541px;
}
</style>